<template>
	<z-paging ref="pagingRef" v-model="list" @query="queryList">
		<template v-slot:top>
			<hx-navbar title="浏览记录"></hx-navbar>
		</template>
		<view class="footprint-content">
			<view class="footprint-warp" v-for="(item, index) in list" :key="index">
				<template v-if="item.goodsSpu">
					<image :src="item.goodsSpu.spuUrls[0]" />
					<view class="right">
						<view class="goods-title u-line-2"> {{ item.goodsSpu.name }} </view>
						<view class="goods-price">
							<view class="text-price" style="color: red"> {{ item.goodsSpu.lowPrice }} </view>
						</view>
						<view class="u-margin-10">
							{{ item.createTime }}
						</view>
					</view>
				</template>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getPage } from '@/api/product/footprint';
onLoad(() => {});
interface Spu {
	spuUrls: Array<string>;
	name: string;
	lowPrice: number;
}
interface List {
	goodsSpu: Spu;
	createTime: string;
}
const list = ref<List[]>([]);
const pagingRef = ref<ZPagingInstance>();

const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage({
		current: pageNo,
		size: pageSize,
		desc: 'create_time',
	}).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};
</script>

<style lang="scss">
.footprint-content {
	border-radius: 10rpx;

	.footprint-warp {
		background-color: #fff;
		margin: 20rpx;
		padding: 10rpx;
		display: flex;
		border-radius: 20rpx;
		image {
			width: 160rpx;
			flex: 0 0 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
		}

		.right {
			flex: 1 0 0%;
			height: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.goods-title {
				font-size: 28rpx;
			}

			.goods-spec {
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #909090;
			}

			.goods-price {
				padding-top: 10rpx;
			}
		}
	}
}
</style>
